<template>
    <div class="white-box">
        <title-more title="充值优惠设置" />
        <div class="table-mb">
            <el-button type="primary" @click="clickUpdate(1)">添加规则</el-button>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="充值金额">
                <template #default="{ row }">
                    <p class="table-price"><em>￥</em>{{ row.amount }}</p>
                </template>
            </el-table-column>
            <el-table-column label="赠送金额">
                <template #default="{ row }">
                    <p class="table-price"><em>￥</em>{{ row.bonus_amount || '0' }}</p>
                </template>
            </el-table-column>
            <el-table-column label="赠送优惠券">
                <template #default="{ row }">
                    <p class="table-price">{{ row.coupon ? row.coupon.title : '--' }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="agent_name" label="赠送代理商"></el-table-column>
            <el-table-column label="赠送等级">
                <template #default="{ row }">
                    <p class="table-price">{{ row.grade ? row.grade.level_name : '--' }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="添加时间"></el-table-column>
            <el-table-column label="操作" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickUpdate(2, row)">编辑</el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(row)">
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog
            v-model="dialogClass"
            :title="class_type == 1 ? '添加规则' : '编辑规则'"
            width="580px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="closeClass"
        >
            <el-form ref="ruleClassRef" :model="ruleClassForm" :rules="ruleCheckClass" label-width="120px">
                <el-form-item label="充值金额" prop="price">
                    <el-input v-model.trim="ruleClassForm.price" oninput="value=value.replace(/[^\d.]/g,'')" clearable placeholder="请输入充值金额" />
                </el-form-item>
                <el-form-item label="赠送金额" prop="give_price">
                    <el-input
                        v-model.trim="ruleClassForm.give_price"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入赠送金额(可选)"
                    />
                </el-form-item>
                <el-form-item label="选择优惠券" prop="coupon_id">
                    <el-select v-model="ruleClassForm.coupon_id" clearable placeholder="请选择选择优惠券(可选)">
                        <el-option :label="item.title" :value="item.coupon_id" v-for="item in coupon_arrs" :key="item.coupon_id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="会员等级" prop="level_id">
                    <el-select v-model="ruleClassForm.level_id" clearable placeholder="请选择会员等级(可选)">
                        <el-option :label="item.level_name" :value="item.grade_id" v-for="item in level_arrs" :key="item.grade_id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="代理商等级" prop="agent_level">
                    <el-select v-model="ruleClassForm.agent_level" clearable placeholder="请选择代理商等级(可选)">
                        <el-option :label="item.label" :value="item.agent_level" v-for="item in agent_arrs" :key="item.agent_level" />
                    </el-select>
                    <p class="input-tips">充值送非区域代理商</p>
                </el-form-item>
                <el-form-item label="补充说明" prop="remarks">
                    <el-input v-model.trim="ruleClassForm.remarks" type="textarea" clearable :rows="4" placeholder="请输入补充说明" />
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitForm(ruleClassRef)"> 确认 </el-button>
                        <el-button @click="resetForm(ruleClassRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive, watch,onBeforeUnmount } from "vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getCouponAndLevel()
})

onBeforeUnmount(() => {
   
})

const coupon_arrs = ref([]) // 优惠券
const level_arrs = ref([]) // 会员等级
function getCouponAndLevel() {
    proxy.$axios
        .get("ump/recharge/add")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                coupon_arrs.value = result.coupon_list
                level_arrs.value = result.grade_list
                getList()
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("ump/recharge/index", params)
}

/**
 * 添加/编辑
 * @param {Boolean} dialogClass 添加/编辑弹窗状态
 * @param {Boolean} form_loading 提交按钮状态
 * @param {Number} class_type 1是添加，2是编辑
 * @param {Array} ruleClassRef 表单规则
 * @param {Object} ruleClassForm  表单字段
 * @param {Object} ruleCheckClass  表单提示
 * @param {Function} submitForm 提交表单
 * @param {Function} closeClass 关闭弹窗
 */
const dialogClass = ref(false)
const class_type = ref(1)
const form_loading = ref(false)
const ruleClassRef = ref(null)
const ruleClassForm = reactive({
    id: "",
    price: "",
    remarks: "",
    give_price: "",
    level_id: "",
    coupon_id: "",
    agent_level: "",
})
const ruleCheckClass = reactive({
    price: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
})
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                amount: ruleClassForm.price, // 充值金额
                bonus_amount: ruleClassForm.give_price, // 送金额
                grade_id: ruleClassForm.level_id, // 会员等级ID
                coupon_id: ruleClassForm.coupon_id,
                agent_level: ruleClassForm.agent_level, // 代理商等级[1:一级代理,2:二级代理,3:三级代理]
                remark: ruleClassForm.remarks,
            }
            if (class_type.value == 2) {
                data.recharge_id = ruleClassForm.id
            }
            let url = class_type.value == 1 ? "ump/recharge/add" : "ump/recharge/update"
            proxy.$axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogClass.value = false
                        proxy.$message({ message: `${class_type.value == 1 ? '添加成功！' : '编辑成功！'}`, type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closeClass = () => {
    dialogClass.value = false
    resetForm(ruleClassRef.value)
}
const clickUpdate = (type, row) => {
    class_type.value = type
    dialogClass.value = true
    if (type == 2) {
        setTimeout(() => {
            class_type.value = 2
            ruleClassForm.id = row.recharge_id
            ruleClassForm.price = row.amount
            ruleClassForm.give_price = row.bonus_amount
            ruleClassForm.remarks = row.remark
            ruleClassForm.level_id = row.grade_id
            ruleClassForm.coupon_id = row.coupon_id
            ruleClassForm.agent_level = row.agent_level
        }, 50)
    }
}

const clickDel = (row) => {
    proxy.$axios
        .post("ump/recharge/delete", {
            recharge_id: row.recharge_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 代理商等级
const agent_arrs = ref([
    {
        agent_level: 1,
        label: "一级代理商",
    },
    {
        agent_level: 2,
        label: "二级代理商",
    },
    {
        agent_level: 3,
        label: "三级代理商",
    },
])
// function getAgent() {
//     proxy.$axios
//         .get("")
//         .then((res) => {
//             if (res.data.code == 0) {
//                 agent_arrs.value = res.data.data
//             } else {
//                 proxy.$message({message:res.data.msg,type:"error"})
//             }
//         })
//         .catch((err) => {})
// }
</script>
<script>
export default {
    name: "Recharge",
}
</script>

<style lang="less" scoped>
.table-price {
    font-size: @font-size-md;
    em {
        font-size: 13px;
    }
}
</style>
